<!doctype html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="msapplication-navbutton-color" content="black-translucent">
    <title>Photo album</title>
    <script src="js/rem.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="font/iconfont.css">
    <script src="js/vue.min.js"></script>
    <script src="js/jquery.3.2.1.min.js"></script>
    <script src="js/data.js"></script>
    <script src="js/index.js"></script>
</head>
<body>

<div id="body">
    <!--头部导航-->
    <header>
        <div v-for="(span,index) in navarr" v-on:click.prevent="clicktab(index)" :class="{active : index == tabnum}">
            <span class="iconfont" v-html="header[index]"></span>
            <span>{{span}}</span>
        </div>
    </header>
    <!--三-->
    <div class="box" :style="{'min-height':(boxHeight)+'px'}">
        <div class="content" v-if="tabnum == 0">
            <div class="box-title" v-html="navarr[0]"></div>
            <div class="conwen" v-for="(con,index) in shuju.conwen">
                <div class="conwen-box">
                    <img :src='con.url' alt="">
                    <h2>{{con.title}}</h2>
                    <h3>{{con.shijian}}</h3>
                    <h4>{{con.zuozhe}}</h4>
                    <a :href='con.href'>{{btext(con.content)}}</a>
                </div>
            </div>
        </div>
        <div class="content" v-else-if="tabnum == 1">
            <div class="box-title" v-html="navarr[1]"></div>
            <div class="ph-box">
                <div class="ph-content" v-for="(con,index) in shuju.ph_content">
                    <a :href='con.href'>
                        <img :src='con.url' alt="">
                    </a>
                    <p>{{con.content}}</p>
                </div>
            </div>
        </div>
        <div class="content content3" v-else-if="tabnum == 2">
            <div class="box-title" v-html="navarr[2]"></div>
            <ul class="ph-age">
                <li class="age-top">
                    <img :src="shuju.footerTop.url" alt="">
                    <p v-html="shuju.footerTop.content"></p>
                </li>
                <li v-for="(con,index) in shuju.ph_age" @click="age_click(index)">
                    <i class="iconfont" v-html="con.url"></i>
                    <p v-html="con.content"></p>
                    <dl class="age-div" v-show="dlflag && dlindex == index">
                        <dt>
                            <span v-html="shuju.age_dl[index].content"></span>
                            <span v-html="shuju.age_dl[index].text"></span>
                        </dt>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <!--遮罩层-->
    <div class="windows">
        <ul>
            <li>
                <img src="http://zhusirs.gitee.io/zhusirapp/ph/5.png" alt="">
            </li>
            <li>
                <span>请输入密码:</span>
                <input type="password" placeholder="7758258">
                <button id="win-button">确定</button>
                <p class="cuowu">密码错误！请重新输入</p>
            </li>
        </ul>
    </div>
    <!--退出app-->
    <div class="tuichu">即将退出应用</div>
</div>




</body>
</html>
